/*
 * @Author: yangrongxin
 * @Date: 2021-08-04 16:55:42
 * @LastEditors: yangrongxin
 * @LastEditTime: 2021-08-13 10:59:26
 */
import { useEffect, useState } from 'react';
import { View, Text, Image } from '@tarojs/components';
import { getDetail } from './service';
import { Payment } from '..';
import styles from './index.module.less';

const OrderConfirmPanel = (props: {
  orderId: string; // 当前订单的id
  measureTableId: string; // 当前量表的id
  onClose?: any;
}) => {
  const { orderId, measureTableId: propsMeasureTableId, onClose } = props;

  const [orderInfo, setOrderInfo] = useState<any>({});

  useEffect(() => {
    if (propsMeasureTableId)
      getDetail({
        measureTableId: propsMeasureTableId,
      }).then((res: any = {}) => {
        setOrderInfo(res);
        console.log('confirmPanel', res);
      });
  }, [propsMeasureTableId]);

  const {
    headImg, // 首图
    introduce, // 介绍
    measureTableId, // 量表id
    name, // 名称
    num = 0, // 题目数量
    testNum = 0, // 已测人数
    price, // 价格
  } = orderInfo;
  return (
    <View className={styles.container}>
      {/* 删除按钮 预留 */}
      <Image src={headImg} />
      {/* 展示购买人数 */}
      <View className={styles.tips}>
        <Text>
          {num}题 | {testNum}人已测
        </Text>
      </View>
      {/* 展示标签 */}
      <View className={styles.tags}>
        <View>
          <View>
            <Text>#</Text>
          </View>
          <Text>性格心理测试</Text>
        </View>
        <View>
          <View>
            <Text>#</Text>
          </View>
          <Text>睡眠测试</Text>
        </View>
      </View>
      {/* 展示介绍 */}
      <View className={styles.intro}>
        <Text>{introduce}</Text>
      </View>
      {/* 展示支付按钮 */}
      <Payment
        orderId={orderId}
        measureTableId={measureTableId}
        wapperClassName={styles.wxPay}
        text={`微信支付¥${price}`}
        onClose={onClose}
        name={name}
      />
    </View>
  );
};

export default OrderConfirmPanel;
